<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在线订货</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-
scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/y_index.css" />
    <link rel="stylesheet" type="text/css" href="../js/drop/dropload.css" />
    <style>
    .mainBox li {
        width: 3.7rem;
    }

    .mainBox li:nth-child(odd) {
        margin-right: 0;
    }

    #myOrder {
        width: 1rem;
        height: 1rem;
        position: fixed;
        bottom: .4rem;
        right: .4rem;
        border-radius: 50%;
    }
    </style>
</head>

<body>
    <div class="pos_r" style="height: 100vh;">
        <div class="p20">
            <div class="bw flex p20 border-r1">
                <img src="../img/y_search.png" style="width: .28rem;height: .28rem;" />
                <form action="jacascript:return true;" >
                <input type="search" name="search" class="ml20 search" placeholder="请输入" />
                </form>
            </div>
        </div>
        <div class="mt20">
            <div class="bw flex_sa ptb20 top">
                <!--          <li class="active">全部</li>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li> -->
            </div>
        </div>
        <div class="container">
            <div class="listWrap">
                <ul class="flex_sb ptb20 r_wrap mainBox">
                    <!--               <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li>
                <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li>
                <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li>
                <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li>
                <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li>
                <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li>
                <li class="flex flex_column w50 list">
                    <img src="../img/y_5.png" style="width:3.7rem;height: 3.7rem;" />
                    <span>小白熊</span>
                    <span class="c3">￥33.40</span>
                </li> -->
                </ul>
            </div>
        </div>
        <div class="b_diy1 flex_aj colw" id="myOrder" onclick="location.href='./ser_orderManage.html'">
            我的
            <br/>订单
        </div>
    </div>
</body>

</html>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/dlc.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/drop/dropload.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<!--公司的常用函数封装-->
<script type="text/javascript">
var type = 1,
    hui = '',
    off = 0;
var page = 0;
var pagesize = 10;
// 分类列表
dlc_request('/api/goods/goodsCategoryList', {}, function(res) {
    console.log(res);
    if (res.code == 1) {
        var str = '';
        var list = res.goodsCategoryList;
        list.forEach((item, index) => {
            str += ' <li data-id=' + item.id + '>' + item.name + '</li>'
        })
        $('.top').html(str);
        $('.top li').eq(0).addClass('active');
    } else {
        dlctipbox.show(res.msg);
    }
})
$('.top').on('click', 'li', function() {
    if (off) return false;
    off = 1;
    $(this).addClass('active').siblings().removeClass('active');
    type = $(this).data('id');
    page = 1;
    hui.unlock();
    get_list();
})

function get_list() {
    var result = $('.search').val();
    dlc_request('/api/goods/managerGoodsList', { "categoryId": type, "page": page, "limit": pagesize, "name": result }, function(res) {
        console.log(res);
        off = 0;
        if (res.code == 1) {
            var str = '';
            var list = res.data.list;
            if (list) {
                list.forEach((item, index) => {
                    str += '<li class="flex flex_column w50 list" data-id=' + item.goodsId + ' data-c_id=' + item.categoryId + ' data-img=' + item.imgUrl + ' data-c_name=' + encodeURIComponent(encodeURIComponent(item.categoryName)) + '> <img src="' + (dlcUrl() + item.imgUrl) + '" style="width:3.7rem;height: 3.7rem;" /> <span class="text_overflow">' + item.name + '</span> <span class="c3">￥' + item.price + '</span> </li>'
                })
            } else {
                hui.lock();
                hui.noData();
            }
            setTimeout(function() {
                if (page == 1) {
                    $('.mainBox').html(str);
                } else {
                    $('.mainBox').append(str);
                }
                hui.resetload();
                hui.unlock();
                hui.noData(false);
            }, 1500);
        } else {
            dlctipbox.show(res.msg);
        }
    })

}
$('.listWrap').dropload({
    scrollArea: window,
    domUp: {
        domClass: 'dropload-up',
        domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
        domUpdate: '<div class="dropload-update">↑释放更新</div>',
        domLoad: '<div class="dropload-load"><span class="loadings"></span>加载中...</div>'
    },
    domDown: {
        domClass: 'dropload-down',
        domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
        domLoad: '<div class="dropload-load"><span class="loadings"></span>加载中...</div>',
        domNoData: '<div class="dropload-noData">暂无更多数据</div>'
    },
    loadUpFn: function(me) {
        hui = me;
        page = 1;
        get_list();
    },
    loadDownFn: function(me) {
        hui = me;
        page++;
        get_list();

    },
    threshold: 50
})
$('body').on('click', '.list', function() {
    location.href = 'ser_detail.html?id=' + $(this).data('id') + '&c_id=' + $(this).data('c_id') + '&img=' + $(this).data('img') + '&c_name=' + $(this).data('c_name');
})
$('.search').on('keydown', function(e) { //搜索功能
    if (e.keyCode == 13) {
        page = 1;
        get_list();
    }
})
</script>